<div class="admin-dashboard">
    <div class="admin-tabs">
        <button class="tab-button @(ActiveTab == "dungeons" ? "active" : "")" @onclick='() => SwitchTab("dungeons")'>游戏副本管理</button>
        <button class="tab-button @(ActiveTab == "monsters" ? "active" : "")" @onclick='() => SwitchTab("monsters")'>怪物管理</button>
        <button class="tab-button @(ActiveTab == "element" ? "active" : "")" @onclick='() => SwitchTab("element")'>游戏元素管理</button>
    </div>

    <div class="tab-content">
        @switch (ActiveTab)
        {
            case "dungeons":
                <副本管理 />
                break;
            case "monsters":
                <怪物管理 />
                break;
            case "element":
                <元素管理 />
                break;
        }
    </div>
</div>

<style>
    .admin-dashboard {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .admin-tabs {
        display: flex;
        gap: 1rem;
        margin-bottom: 2rem;
        border-bottom: 2px solid #4a2c8d;
        padding-bottom: 1rem;
    }

    .tab-button {
        padding: 0.75rem 1.5rem;
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        color: #a0a0e0;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

    .tab-button:hover {
        background-color: rgba(60, 30, 100, 0.9);
        color: #b19cd9;
    }

    .tab-button.active {
        background-color: rgba(60, 30, 100, 0.9);
        color: #b19cd9;
        border-color: #6a0dad;
    }

    .tab-content {
        flex: 1;
        background-color: rgba(20, 20, 40, 0.95);
        border: 2px solid #4a2c8d;
        border-radius: 10px;
        padding: 1.5rem;
        min-height: 500px;
        overflow: auto;
        height: calc(100% - 100px); /* 减去标签页的高度 */
    }

    /* 确保管理组件能正确填充内容区域 */
    ::deep .admin-container {
        height: 100%;
    }

    ::deep .admin-content {
        height: calc(100% - 100px);
    }
</style>

@code {
    private string ActiveTab = "dungeons";

    private void SwitchTab(string tab)
    {
        ActiveTab = tab;
    }
}